402.継承で2種類のキャラ

CircleとRectが同じAbstractShapeを継承し、displayだけ違う実装に。

p5.js oop

Learning OOP Object Oriented Programming

継承を使って円と四角の2種類を管理します。

クラス構造

AbstractShape (基底クラス)
├── Circle (円)
└── Rect (四角)

102（変数ベース）との比較

102	402
`update()` と `update2()`	共通の `update()` を継承
`display()` と `display2()`	各クラスで `display()` を実装
コード重複あり	共通部分は基底クラスに

継承の威力

class Circle extends AbstractShape {
  display() { ellipse(...); }
}

class Rect extends AbstractShape {
  display() { rect(...); }
}

移動ロジック（update）は書く必要なし。基底クラスから自動的に継承されます。

View Source Code

let W, H, PW, PH;
const PADDING_RATIO = 0.2;
const MAX_SPEED = 10;

let obj;
let obj2;

class AbstractShape {
  constructor() {
    this.pos = {
      x: random(width),
      y: random(height),
    };
    this.speed = {
      x: (Math.random() - 0.5) * MAX_SPEED,
      y: (Math.random() - 0.5) * MAX_SPEED,
    };
    this.acceleration = 0.1;
  }

  update() {
    this.pos.x += this.speed.x;
    this.pos.y += this.speed.y;

    if (this.pos.x < 0 + PW) {
      this.speed.x += this.acceleration;
    } else if (this.pos.x > W - PW) {
      this.speed.x -= this.acceleration;
    }

    if (this.pos.y < 0 + PH) {
      this.speed.y += this.acceleration;
    } else if (this.pos.y > H - PH) {
      this.speed.y -= this.acceleration;
    }
  }

  display() {
    // implement in subclass
  }
}


class Circle extends AbstractShape {
  display() {
    stroke(0);
    fill(0);
    ellipse(this.pos.x, this.pos.y, 10, 10);
    text(["1:", Math.floor(this.pos.x), Math.floor(this.pos.y)], this.pos.x + 10, this.pos.y + 10);
  }
}

class Rect extends AbstractShape {
  display() {
    stroke(0);
    fill(0);
    rectMode(CENTER)
    rect(this.pos.x, this.pos.y, 10, 10);
    text(["2:", Math.floor(this.pos.x), Math.floor(this.pos.y)], this.pos.x + 20, this.pos.y + 20);
  }
}

// main

function setup() {
  createCanvas((W = windowWidth), (H = windowHeight));
  PW = W * PADDING_RATIO;
  PH = H * PADDING_RATIO;

  obj = new Circle()
  obj2 = new Rect()
}

function draw() {
  background(255);

  obj.update();
  obj2.update();

  obj.display();
  obj2.display();
}